<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06_数据代理</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      Vue.config.productionTip = false
      let number = 18
      let person = {
        name: '张三',
        sex: '男',
      }
      //1.通过该方法可以给对象添加属性
      //2.该方法添加的属性默认不可被枚举   要想改变需要添加enumable属性
      Object.defineProperty(person, 'age', {
        // value: 18,
        // enumerable: true, //控制属性是否可以被枚举(能否被遍历)，默认是false
        // writable: true,//控制属性是否可以被修改，默认是false
        // configurable: true,//控制属性是否可以被删除，默认是false

        /**
         * 1.当有人读取persoon的age属性时，该方法就会被调用，其返回值就是age的值
         * 2.get方法把number赋值给age ,number的值改变  person的age属性也跟着改变
         * */

        get() {
          console.log('有人读取了number属性')
          return number
        },

        /**
         * 当有人修改person的age属性的时候，该方法会被调用，value就是修改的具体数值
         * 1.修改age的值，并且把修改的值赋给number
         * */
        set(value) {
          console.log('有人修改了age属性且值是:' + value)
          number = value
        },
      })

      //循环遍历
      for (const key in person) {
        console.log(key + ':' + person[key])
      }
      console.log(person)
    </script>
  </body>
</html>
